<template>
	<div class="root-div">
		
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+listCurID" :style="'height:calc(100vh - '+CustomBar+'px - 20px)'" scroll-with-animation="true" enable-back-to-top="true">
		  <view class="cu-bar bg-white search fixed">
		    <view class="search-form round">
					<!-- <text class="icon-search"></text>
					<input type="text" placeholder="请选择" :custom-style="InputCssObj" v-model="selectUsersShow"></input> -->
					<u-search placeholder="请输入关键字" v-model="keyword" :show-action="false" :clearabled="true" @search="search"></u-search>
		    </view>

		    <view class="action">
					<u-button type="primary" size="mini" shape="square" @click="ConfirmSelect">确定</u-button>
		    </view>
		  </view>

			<checkbox-group @change="checkboxChange">
				<block v-for="(item, index) in list">
					<view :class="'padding indexItem-'+list[index]">{{index}}</view>
						<view class="cu-list menu-avatar no-padding">
						  <view v-for="(titem, tindex) in item">
								<checkbox :value="titem.allItems.UserId" :checked="titem.checked">
									<view class="cu-item u-pl-10">
										<image :src='titem.allItems.avatarUrl' class='cu-avatar round lg'></image>
										<view class="content u-pl-10">
											<view class="text-grey">
												<text class="text-abc">{{titem.allItems.RealName}}</text>
											</view>
											<view class="text-gray text-sm">
												{{titem.allItems.UserId}}
											</view>
										</view>
									</view>
								</checkbox>
						  </view>
						</view>
					</view>
				</block>
			</checkbox-group>

		  <view class="indexBar" style="height:calc(110vh)">
		    <view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove="tMove">
		  	<view class="indexBar-item" v-for="(item, index) in indexs" :id="index" @touchstart="getCur" @touchend="setCur">{{indexs[index]}}</view>
		    </view>
		  </view>
		</scroll-view>
		
		<!-- 选择转交他人处理的范围 -->
		<u-modal
		  ref="uModal"
		  title="请选择转交范围"
		  v-model="AcceptanceRange_Show"
		  :mask-close-able="true"
		  :show-confirm-button="false"
		  confirm-text="确定"
		  @confirm="TransferToOthers"
		>
			<view class="u-p-20" style="margin-left: 10%;">
				<u-radio-group wrap="true" v-model="selectedRange">
					<u-radio
						@change="radioChange()" 
						v-for="(item, index) in AcceptanceRange" :key="index" 
						:name="item.quantity"
						v-model="item.quantity"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="u-p-20">
			  <u-button type="primary" shape="circle" @click="TransferToOthers">
				  确定
			  </u-button>
			</view>
		</u-modal>
		
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
				StatusBar: '',
				CustomBar: '',
				hidden: true,
				list: [],
				listCur: {},
				boxTop: 0,
				barTop: 0,
				movableY: 0,
				listCurID: '',
				indexs: [],
				selectUsers: [],
				selectUsersShow: [],
				InputCssObj: {
					"padding-left": "40rpx"
				},
				limit: 0,
				owner: '',
				isLoadTeamUsers: 0,
				SceneAssetsId: '',
				keyword: '',
				isTransferToOthers: 0,//是否为转交他人处理
				MainDocUnid: '',//主文档id,转交他人处理的时候才有
				docUnid: '',//子文档id,转交他人处理的时候才有
				TransferToUser: {},
				useTransfetUser: 0,
				AcceptanceRange_Show: false,
				AcceptanceRange: [
					{
						quantity: 'one',
						name: '只转交该条成果'
					},
					{
						quantity: 'all',
						name: '转交该测评所有成果'
					}
				],
				selectedRange: 'one'
			};
	  },
	
	  onLoad(options) {
			this.owner = uni.getStorageSync('userInfo').userId
			if(this.isNotNull(options.owner)){
				this.owner = options.owner
			}
			this.limit = options.limit
			if(this.isNotNull(options.selectUsers)){
				this.selectUsers = options.selectUsers.split(",")
			}
			if(this.isNotNull(options.SceneAssetsId)){
				this.SceneAssetsId = options.SceneAssetsId
			}
			//是否加载团队队员数据
			if(this.isNotNull(options.isLoadTeamUsers)){
				this.isLoadTeamUsers = options.isLoadTeamUsers
			}
			// 是否为转交他人处理
			if(this.isNotNull(options.isTransferToOthers) && this.isNotNull(options.MainDocUnid) && this.isNotNull(options.docUnid)){
				this.isTransferToOthers = options.isTransferToOthers
				this.MainDocUnid = options.MainDocUnid
				this.docUnid = options.docUnid
				if(this.isNotNull(options.TransferToUser)){
					let transferto_user = decodeURIComponent(options.TransferToUser)
					this.TransferToUser = JSON.parse(transferto_user)
					this.useTransfetUser = 1
				}
			}
			this.initUsersData()
	  },
	
	  mounted() {
			// 获取系统状态栏信息
			wx.getSystemInfo({
				success: e => {
				this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				// this.Custom = custom;
				this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				}
			})
	  },
	
	  onReady() {

	  },
	
	  methods: {
		  
		  /**
		  * 初始化用户数据
		  */
		  async initUsersData(){
			    // 转交他人处理并且只能退回给原验收人
			    if(this.isTransferToOthers == 1 && this.useTransfetUser == 1){
					this.list = [[{allItems:this.TransferToUser}]]
					return
				}
				let result = await this.$u.api.unifyRequest({
					userId: this.owner,
					appid: 'CustomMade',
					wf_num: 'R_CustomMade_BL005',
					isLoadTeamUsers: this.isLoadTeamUsers,
					SceneAssetsId: this.SceneAssetsId,
					searchStr: this.keyword,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				this.list = result.data
				for(let index in this.list){
					this.indexs.push(index)
					let arr = this.list[index]
					for(let key in arr){
						if(this.selectUsers.indexOf(arr[key].allItems.UserId)>-1){
							this.list[index][key].checked = true
							this.selectUsersShow.push(this.list[index][key].allItems.RealName)
						}
					}
				}
		  },
		  
		  //获取文字信息
		  getCur(e) {
			  this.hidden = false
			  this.listCur = this.list[e.target.id]
		  },

		  setCur(e) {
			  this.hidden = true
			  this.listCur = this.listCur
		  },
		  //滑动选择Item
		  tMove(e) {
			let y = e.touches[0].clientY,
			  offsettop = this.boxTop,
			  that = this;
			//判断选择区域,只有在选择区才会生效
			if (y > offsettop) {
			  let num = parseInt((y - offsettop) / 20);
			  this.listCur = that.list[num]
			};
		  },

		  //触发全部开始选择
		  tStart() {
			  this.hidden = false
		  },

		  //触发结束选择
		  tEnd() {
			  this.hidden = true
			  this.listCurID = this.listCur
		  },
		  indexSelect(e) {
			let that = this;
			let barHeight = this.barHeight;
			let list = this.list;
			let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
			for (let i = 0; i < list.length; i++) {
			  if (scrollY < i + 1) {
				  this.listCur = list[i]
				  this.movableY = i * 20
				return false
			  }
			}
		  },
		  
		  /**
		   * 选中复选框
		   */
		  checkboxChange(e) {
			this.selectUsers = e.detail.value
			this.resetArrByUserids()
		  },
		  
		  /**
		   * 选中人员后确定返回人员列表
		   */
		  async ConfirmSelect(){
			  let userList = []
			  for(let index in this.list){
			  	let arr = this.list[index]
			  	for(let key in arr){
			  		if(this.selectUsers.indexOf(arr[key].allItems.UserId)>-1){
						let user = {}
						user.Member = this.list[index][key].allItems.UserId
						user.MemberName = this.list[index][key].allItems.RealName
						user.avatarUrl = this.list[index][key].allItems.avatarUrl
			  			userList.push(user)
			  		}
			  	}
			  }
			  if(this.limit > 0 && userList.length > this.limit){
				  this.showMSG("none","选择的用户不能超过"+this.limit+"个哦！")
			  }else{
				  if(this.isTransferToOthers == 1){//转他人处理弹窗选择处理单条数据或者全部数据
					  this.AcceptanceRange_Show = true
				  }else{
					  if(this.isLoadTeamUsers == '1'){
						  this.addUsersFromTeam()
					  }else{
						  uni.$emit("saveUserList", userList)
						  this.goBack()
					  }
				  }
			  }
		  },
		  
		  /**
		   * 根据用户id串（selectUsers）将用户名放到显示的数组中（selectUsersShow）
		   */
		  resetArrByUserids(){
			  this.selectUsersShow = []
			  for(let index in this.list){
			  	let arr = this.list[index]
			  	for(let key in arr){
			  		if(this.selectUsers.indexOf(arr[key].allItems.UserId)>-1){
			  			this.selectUsersShow.push(this.list[index][key].allItems.RealName)
			  		}
			  	}
			  }
		  },
		  
		  /**
		   * 如果isLoadTeamUsers=1即是添加从团队中选择的人
		   */
		  async addUsersFromTeam(){
			  let users = ""
			  for(let i in this.selectUsers){
				  if(users == ""){
					  users = this.selectUsers[i]
				  }else{
					  users += "," + this.selectUsers[i]
				  }
			  }
			  let result = await this.$u.api.unifyRequest({
			  	owner: this.owner,
			  	appid: 'CustomMade',
			  	wf_num: 'R_CustomMade_BY012',
				SceneAssetsId: this.SceneAssetsId,
			  	users: users,
			  	loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
			  });
			  if(result.code == 200){
				  this.goBack()
			  }
		  },
		  
		  /**
		  * 搜索
		  */
		  async search() {
			  this.initUsersData()
		  },
		  
		  // 选中某个单选框时，由radio时触发
		  radioChange(e) {
		  	  this.selectedRange = e
		  },
		  
		  /**
		   * 转他人处理
		   */
		  async TransferToOthers(){
			  let user = {}
			  for(let index in this.list){
			  	let arr = this.list[index]
			  	for(let key in arr){
			  		if(this.selectUsers.indexOf(arr[key].allItems.UserId)>-1){
						user.userId = this.list[index][key].allItems.UserId
						user.userName = this.list[index][key].allItems.RealName
			  		}
			  	}
			  }
			  let result = await this.$u.api.unifyRequest({
			  	  appid: 'ProductPromote',
			  	  wf_num: 'R_ProductPromote_BL023',
				  docUnid: this.docUnid,//子文档id
				  MainDocUnid: this.MainDocUnid,//主文档id
				  quantity: this.selectedRange,
				  NewInspectorid: user.userId,
				  NewInspectorName: user.userName,
			  	  loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			  });
			  if(result.code == 200){
				  this.showMSG('success','转交成功')
				  setTimeout(() => {
				  	  uni.reLaunch({url:'/pages/index/index'})
				  }, 2500)
			  }else{
				  this.showMSG('error','出错啦！')
				  setTimeout(() => {
				  	  this.goBack()
				  }, 2500)
			  }
		  }
		  
	}
}
</script>

<style scoped>
	.root-div {
		background-color: #efecec;
		font-size: 28rpx;
		color: #333;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		--red: #e54d42;
		--orange: #f37b1d;
		--yellow: #fbbd08;
		--olive: #8dc63f;
		--green: #39b54a;
		--cyan: #1cbbb4;
		--blue: #0081ff;
		--purple: #6739b6;
		--mauve: #9c26b0;
		--pink: #e03997;
		--brown: #a5673f;
		--grey: #8799a3;
		--gray: #aaa;
		--black: #333;
		--white: #fff;
		--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
		--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
		--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
		--gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
		--gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
		--gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
	}
	
	.indexes {
		position: relative;
	}
	
	scroll-view {
		display: block;
		width: 100%;
	}
	
	* {
		margin: 0;
	}
	
	.padding {
		padding: 30rpx;
	}
	
	view, scroll-view, swiper, button, input, textarea, label, navigator, image {
		box-sizing: border-box;
	}
	
	view {
		display: block;
	}
	
	.cu-list.menu-avatar {
		overflow: hidden;
	}
	
	.cu-list>.cu-item {
		transition: all 0.6s ease-in-out 0s;
		transform: translateX(0rpx);
	}
	
	.cu-list.menu-avatar>.cu-item {
		position: relative;
		display: flex;
		padding-right: 30rpx;
		height: 140rpx;
		background-color: #fff;
		justify-content: flex-end;
		align-items: center;
	}
	
	.round {
		border-radius: 5000rpx;
	}
	.cu-avatar {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background-color: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		width: 64rpx;
		height: 64rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
	}
	
	.cu-avatar.lg {
		width: 96rpx;
		height: 96rpx;
		font-size: 2em;
	}
	.cu-list.menu-avatar>.cu-item>.cu-avatar {
		position: absolute;
		left: 30rpx;
	}
	
	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 146rpx;
		width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx);
		line-height: 1.6em;
	}
	
	.cu-list.menu-avatar>.cu-item .content>view:first-child {
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}
	.text-grey, .line-grey, .lines-grey {
		color: var(--grey);
	}
	
	.text-sm {
		font-size: 24rpx;
	}
	.text-gray, .line-gray, .lines-gray {
		color: var(--grey);
	}
	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20rpx 20rpx 20rpx 60rpx;
		display: flex;
		align-items: center;
	}
	
	.indexBar .indexBar-box {
		width: 40rpx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
	}
	
	.indexBar-item {
		flex: 1;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #888;
	}
	
	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;
		justify-content: space-between;
	}
	.cu-bar.fixed, .nav.fixed {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	.bg-white {
		background-color: #fff;
		color: #666;
	}
	.round {
		border-radius: 5000rpx;
	}
	.cu-bar .search-form {
		background-color: #f5f5f5;
		line-height: 64rpx;
		height: 64rpx;
		font-size: 24rpx;
		color: #666;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 20rpx;
	}
	.cu-bar .action {
		display: flex;
		align-items: center;
		height: 100%;
		justify-content: center;
		max-width: 100%;
	}
	.cu-bar .action:last-child {
		margin-right: 30rpx;
	}
	.cu-bar .search-form+.action {
		margin-right: 20rpx;
	}
	
	.shadow-blur {
		position: relative;
	}
	.cu-btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 28rpx;
		height: 64rpx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0rpx, 0rpx);
		margin-right: initial;
	}
	.bg-gradual-green {
		background-image: var(--gradualGreen);
		color: #fff;
	}
	/* button {
		-webkit-tap-highlight-color: transparent;
		background-color: #f8f8f8;
		border-radius: 5px;
		box-sizing: border-box;
		color: #000;
		cursor: pointer;
		display: block;
		font-size: 18px;
		line-height: 2.55555556;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		padding-left: 14px;
		padding-right: 14px;
		position: relative;
		text-align: center;
		text-decoration: none;
	} */
	
	.indexItem-A {
		padding-top: 130rpx;
	}
	
	.cu-item {
		position: relative;
		display: flex;
		padding-right: 30rpx;
		height: 140rpx;
		background-color: #fff;
		justify-content: flex-end;
		align-items: center;
		transition: all 0.6s ease-in-out 0s;
		transform: translateX(0rpx);
	}
	
	.cu-list {
		background-color: white;
		padding-left: 20rpx;
	}
	
</style>
